<template>
    <el-row>
        <el-col :span="4" class="groups" v-loading="groupLoading" element-loading-text="正在获取分组信息..."
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.7)">
            <div v-for="group in groups" class="group" :id="'group_' + group.uuid" :key="group.uuid"
                @click="changeGroup(group.uuid)">
                <span> {{ group.groupName }} </span>
                <div class="group-right"></div>
            </div>
        </el-col>
        <el-col :span="20" class="resources">
            <!-- 搜索 -->
            <Search ref="search" :fields="searchFields" :search="getList" @clear="searchClear"></Search>

            <!-- 表格组件 -->
            <DataTable v-loading="listLoading" :list="listData" :fields="listFields" :permissions="$store.state.permissions"
                :add="toSave" :edit="toEdit" :del="del" :batchDel="batchDel">
            </DataTable>
            <!-- 分页 -->
            <el-pagination style="float:right;margin-top: 10px;" background layout="total, sizes, prev, pager, next"
                :page-sizes="[5, 10, 15, 30]" :page-size="pageSize" :total="total" @current-change="changePage"
                @size-change="changeSize">
            </el-pagination>

            <!-- 新增弹窗 -->
            <el-dialog title="新增资源" :visible.sync="formVisible" width="60%" :before-close="cancel" :destroy-on-close="true"
                :close-on-click-modal="false">
                <el-form ref="form" label-width="12%">
                    <el-form-item label="上传">
                        <el-upload
                            class="upload-demo"
                            drag 
                            action="#" 
                            :multiple="false"
                            :http-request="uploadFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">文件大小不能超过5MB</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                </span>
            </el-dialog>

            <!-- 修改弹窗 -->
            <Form ref="editForm" title="修改所在分组" :visible.sync="editVisible" :fields.sync="formFields" :formData="formData" :submitForm="saveEdit">
            </Form>

        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            groups: [],
            groupLoading: false,
            thisGroup: undefined,

            searchFields: [
                {
                    label: "资源名称",
                    value: "resourceName"
                }
            ],
            pageNum: 1,
            pageSize: 10,
            total: 0,

            listLoading: false,
            listData: [],
            listFields: [
                {
                    label: "资源名称",
                    value: "resourceName"
                },
                {
                    label: "资源类型",
                    value: "resourceType"
                },
                {
                    label: "预览",
                    value: "resourceUrl",
                    type: "image"
                },
                {
                    label: "上传时间",
                    value: "createTime",
                },
                {
                    label: "分组",
                    value: "groupName",
                },
            ],

            formVisible: false,

            editVisible: false,
            formFields:[
                {
                    label: "分组名称",
                    value: "group_name",
                    type: "selector",
                    options: [
                        {
                            groupName: "无分组",
                            uuid: undefined,
                        }
                    ],
                    optionsLabel: "groupName",
                    optionsValue: "uuid",
                },
            ],
            formData: {},
        }
    },
    mounted() {
        this.getGroupList();
        this.getList();
    },
    methods: {
        saveEdit(){
            let vo = {
                objectCode: "sys_resource",
                fields: [
                    {
                        fieldCode: "group_name",
                        value: this.formData.group_name
                    }
                ],
                conditions: [
                    {
                        fieldCode: "uuid",
                        operator: "=",
                        value: this.formData.uuid
                    }
                ]
            }
            this.$api.baseData.save(vo).then(res=>{
                if(res.code == 200){
                    this.$message.success("修改成功!");
                    this.editVisible = false;
                    this.$refs.search.search(this.$refs.search.param);
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
        toEdit(uuid){
            let vo = {
                objectCode: "sys_resource",
                uuid: uuid
            }
            this.$api.baseData.detail(vo).then(res=>{
                this.formData = res.data;
            })
            this.editVisible = true;
        },
        batchDel(uuids) {
            this.$api.resource.batchDel({uuids:uuids}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.msg);
                    this.$refs.search.search(this.$refs.search.param);
                }else{
                    this.$message.error(res.msg);
                }
            });
        },
        del(uuid) {
            this.$api.resource.del({uuid:uuid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.msg);
                    this.$refs.search.search(this.$refs.search.param);
                }else{
                    this.$message.error(res.msg);
                }
            });
        },
        uploadFile(file){
            const formData = new FormData();
            formData.append("file", file.file);
            formData.append("groupName",this.thisGroup);
            this.$api.resource.uploadFile(formData).then(res=>{
                if(res.code == 200){
                    this.$message.success("上传成功!");
                    this.formVisible = false;
                    this.$refs.search.search(this.$refs.search.param);
                }else{
                    this.$message.error(res.msg);
                }
            });
        },
        cancel(){
            this.formVisible = false;
        },        
        toSave() {
            this.formVisible = true;
        },
        searchClear() {
            this.thisGroup = undefined;
            this.changeGroup(undefined);
        },
        getList(param) {
            this.listLoading = true;
            let body = {
                resourceName: param ? param.resourceName : undefined,
                groupName: this.thisGroup,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }

            this.$api.resource.getList(body).then(res => {
                if (res.code == 200) {
                    this.listData = res.data.list;
                    this.pageNum = res.data.pageNum;
                    this.total = res.data.total;
                }
                this.listLoading = false;
            })
        },
        // 切换每页大小
        changeSize(pageSize) {
            this.pageSize = pageSize;
            this.$refs.search.search(this.$refs.search.param);
        },
        // 切换页码
        changePage(pageNum) {
            this.pageNum = pageNum;
            this.$refs.search.search(this.$refs.search.param);
        },
        // 点击分组
        changeGroup(uuid) {
            let all_group = document.querySelectorAll(".group");
            all_group.forEach(e => {
                e.style = "color: #303133";
                e.childNodes[1].style = "background-color: #eef1f6";
            });
            let this_group = document.querySelector("#group_" + uuid);
            this_group.style = "color: #1890ff;"
            this_group.childNodes[1].style = "background-color: #1890ff";
            this.thisGroup = uuid;
            this.$refs.search.search(this.$refs.search.param);
        },
        // 获取分组列表
        getGroupList() {
            this.groupLoading = true;
            this.groups = [
                {
                    uuid: undefined,
                    groupName: "全部资源"
                }
            ]
            this.$api.resource.getGroupList().then(res => {
                if (res.code == 200 && res.data != null) {
                    res.data.forEach(e => {
                        this.groups.push(e);
                        this.formFields[0].options.push(e);
                    });
                }
                this.groupLoading = false;
            })
        },
    }
}
</script>

<style lang="less" scoped>
.groups {
    background-color: #eef1f6;
    height: calc(100vh - 176px);
    padding: 20px 0px 20px 10px;

    .group {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        padding: 5px 0;

        .group-right {
            width: 5px;
            height: 30px;
            float: right;
        }
    }

    .group:hover {
        color: #1890ff;
    }

    .group:first-of-type {
        color: #1890ff;

        .group-right {
            background-color: #1890ff;
        }
    }
}

.resources {
    padding: 0 0 0 20px;
}</style>